<template>
  <div class="settings-overlay" @click.self="$emit('close')">
    <div class="settings-modal">
      <div class="settings-header">
        <h2>设置</h2>
        <button class="close-btn" @click="$emit('close')">
          <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
          </svg>
        </button>
      </div>

      <div class="settings-content">
        <div class="setting-item">
          <label>默认下载路径</label>
          <div class="path-input-group">
            <input 
              type="text" 
              v-model="defaultPath" 
              readonly
              placeholder="选择默认下载路径..."
              class="path-input"
            />
            <button @click="selectPath" class="browse-btn">
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M3 7C3 5.89543 3.89543 5 5 5H9L11 7H19C20.1046 7 21 7.89543 21 9V17C21 18.1046 20.1046 19 19 19H5C3.89543 19 3 18.1046 3 17V7Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
              </svg>
              浏览
            </button>
          </div>
          <p class="hint">设置后，下载时将自动使用此路径，无需每次选择</p>
        </div>
      </div>

      <div class="settings-footer">
        <button @click="handleReset" class="btn-secondary">重置为默认</button>
        <button @click="handleSave" class="btn-primary">保存设置</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useDownloadStore } from '../stores/downloadStore';

const emit = defineEmits(['close']);
const downloadStore = useDownloadStore();

const defaultPath = ref(downloadStore.settings.defaultPath || '');

const selectPath = async () => {
  if (window.electronAPI && window.electronAPI.selectDirectory) {
    const path = await window.electronAPI.selectDirectory();
    if (path) {
      defaultPath.value = path;
    }
  } else {
    alert('此功能需要在 Electron 环境中运行');
  }
};

const handleSave = () => {
  downloadStore.updateSettings({
    defaultPath: defaultPath.value
  });
  emit('close');
};

const handleReset = () => {
  defaultPath.value = '';
};

onMounted(() => {
  const settings = downloadStore.settings;
  defaultPath.value = settings.defaultPath || '';
});
</script>

<style scoped>
.settings-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.settings-modal {
  background: linear-gradient(135deg, #1e1e2e 0%, #2a2a3e 100%);
  border-radius: 1rem;
  width: 90%;
  max-width: 600px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settings-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #e0e0e0;
}

.close-btn {
  background: none;
  border: none;
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  color: #a0a0a0;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #e0e0e0;
}

.close-btn svg {
  width: 100%;
  height: 100%;
}

.settings-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.setting-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.setting-item > label {
  font-size: 1rem;
  font-weight: 500;
  color: #e0e0e0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.path-input-group {
  display: flex;
  gap: 0.75rem;
}

.path-input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem;
  color: #e0e0e0;
  font-size: 0.875rem;
  cursor: default;
}

.browse-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  border: none;
  border-radius: 0.5rem;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.browse-btn svg {
  width: 1.25rem;
  height: 1.25rem;
}

.browse-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}

.slider-group {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  outline: none;
  -webkit-appearance: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
  cursor: pointer;
  transition: all 0.2s;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
}

.slider-value {
  min-width: 2rem;
  text-align: center;
  font-weight: 600;
  color: #00d4ff;
  font-size: 1.25rem;
}

.checkbox {
  width: 1.25rem;
  height: 1.25rem;
  cursor: pointer;
  accent-color: #00d4ff;
}

.hint {
  font-size: 0.875rem;
  color: #a0a0a0;
  margin: 0;
}

.settings-footer {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-secondary,
.btn-primary {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  border: none;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-secondary {
  background: rgba(255, 255, 255, 0.05);
  color: #a0a0a0;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #e0e0e0;
}

.btn-primary {
  background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
}
</style>

